body{
	font-family: Verdana, calibri, sans-serif;
	margin: 0px;
	padding: 0px;
	background-color: #069;
	background-image: url(images/microphone-338481_960_720.jpg), url(images/microphone-2586297_960_720.jpg) ;
	background-size: 100%, 100%;
	background-repeat: no-repeat, no-repeat;
	background-position: 0 190, 0 1000;
	background-attachment: scroll, scroll;
	text-indent: 5px hanging;
	}


h1{
	background-color: RGB(250, 200, 000);
	text-indent: 5px;				}

h2{
	text-indent: 5px each-line;			}


h3{
	text-indent: 5px each-line;			}


img{
	padding: 7px;
	border: 0px solid #ccc;
	box-shadow: 0px 0px 0px #BBB;
	width: 97%;					}


#texte{
	background-color: RGBa(350, 220, 150, 0.85);
	width: 57%;					}







{+++}

/*  NAV  */ 


nav > ul{
	margin: 10px;
	padding: 5px;			}

nav li{
	list-style-type: none;		}

nav{
	width: 100%;
	background-color: #424558;	}

nav > ul > li > a{
	padding: 20px 30px;
	color: #FFF;			}

nav > ul > li{
	float: left;
	position: relative;		}




/* ----- */ 

nav >ul::after{
	content: "";
	display: table;
	clear: both;				}

nav li:hover a{
	padding: 15px 30px 20px 30px;		}

nav a{
	display: inline-block;
	text-decoration: none;		}








/* ----- */ 

#menus-centre{
	margin-left: 64px;		}



/* ----- */ 
.menu-Informations{
	float: right;
	text-align: right;

	position: relative;		}









{+++}

/* POINTEUR sur MENUS   --> border-tops  +  background-colors   */ 

.menu-accueil:hover{
	border-top: 5px solid #ff0000;
	background-color: RGBa(228, 77, 38, 0.15);	}

.menu-Artistique:hover{
	border-top: 5px solid #298dff;
	background-color: RGBa(000, 112, 192, 0.15);	}

.menu-Technique:hover{
	border-top: 5px solid #f1dc4f;
	background-color: RGBa(241, 211, 79, 0.15);	}

/* ----- */ 
.menu-phpmysql:hover{
	border-top: 5px solid #e44d26;
	background-color: RGBa(228, 77, 38, 0.15);	}

.menu-autresmenus:hover{
	border-top: 5px solid #e44d26;
	background-color: RGBa(228, 77, 38, 0.15);	}


/* ----- */ 
.menu-Informations:hover{
	border-top: 5px solid #00e331;
	background-color: RGBa(000, 112, 192, 0.15);	}








/* SOUS-MENUs --> CLASSE .submenu  */ 

.submenu{
	display: none;			}

.submenu li{
	border-bottom: 1px solid #CCC;	}

.submenu li a{
	padding: 0px 0px;
	font-size: 14px;
	color: #222538;
	width: 270px;
	font-weight: bold;			}

nav li:hover .submenu{
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 0px;
	z-index: 100000;		}





/*  SOUS-MENU Informations -->   CLASSE .InfSubmenu   */ 

.InfSubmenu{
	display: none;				}

.InfSubmenu li{
	border-bottom: 1px solid #CCC;		}

.InfSubmenu li a{
	padding: 0px 0px;
	font-size: 14px;
	color: #222538;
	width: 270px;	
	text-align: right;
	font-weight: bold;			}

nav li:hover .InfSubmenu{
	display: inline-block;
	position: absolute;
	top: 100%;
	right: 0px;
	padding: 0px;
	z-index: 100000;
	text-align: right;			}






/* SOUS-MENUS  -->  background-colors  */ 

.menu-accueil .submenu{
	background-color: #998040;		}

.menu-Artistique .submenu{
	background-color: RGB(165, 230, 255);
	text-align: left;			}

.menu-Technique .submenu{
	background-color: RGB(250, 250, 140);
	text-align: left;			}

/* ------ */ 
.menu-phpmysql .submenu{
	background-color: RGB(228, 77, 38);	}

.menu-autresmenus .submenu{
	background-color: RGB(228, 77, 38);	}


/* ----- */ 
.menu-Informations .InfSubmenu{
	display: none;	
	background-color: RGB(170, 250, 190);
	text-align: right;			}








/* POINTEUR sur les SOUS-MENUS --> Texte  */ 

.submenu li:hover a{
	color: #EEE;
	font-weight: #;		}

.InfSubmenu li:hover a{
	color: #EEE;
	font-weight: #;	
	text-align: right;	}


a:hover{
	color: #EEE;
	font-weight: bold;
	margin: -3px;		}




/* POINTEUR sur les SOUS-MENUS --> background-colors  */ 

.menu-accueil .submenu li:hover{
	background-color: RGB(210, 77, 60);		}

.menu-Artistique .submenu li:hover{
	background-color: RGB(000, 75, 120);		}

.menu-Technique .submenu li:hover{
	background-color: RGB(200, 90, 5);		}

/* ----- */ 
.menu-phpmysql .submenu li:hover{
	background-color: RGB(228, 77, 38);		}

.menu-autresmenus .submenu li:hover{
	background-color: RGB(228, 77, 38);		}

/* ----- */ 
.menu-Informations .InfSubmenu li:hover{
	display: inline-block;	
	background-color: RGB(000, 100, 0);		}









{+++}

/* MENU pour PETITS ÉCRANS */ 


/* ----- */ 

.menu-mobile{
	display: none;		}

nav input[type=checkbox]{
	display: none;		}


nav input[type=checkbox]:checked ~ ul{
	display: block;		}



/* ----- */ 

@media screen and (max-width: 680px){

	.menu-mobile{
		display: block;
		color: #FFF;
		background-color: RGBa(29, 197, 151, 0.97);
		text-align: center;
		padding: 12px 0px;	}

	nav ul{
		display: none;		}


	nav ul li, nav ul li a{
		width: 100%;
		text-align: center;	}


	nav ul li a, nav ul li:hover a{
		padding: 5px 0px;	}


	nav li:hover .submenu{
		display: block;
		position: static;	}


	#menus-centre{
	margin: 0px;		}


	h1{
	font-size: 20px;	}


	#texte{
	background-color: RGBa(350, 220, 150, 0.85);
	width: 90%;		}


	#texte a:hover{
	color: black;
	font-weight: bold;	}


	#texte{
	font-size: 14px;	}



/* ----- */ 
	.menu-Informations{
		position: relative;
						}
	.menu-Informations:hover{
		border-top: 5px solid #00e331;
		background-color: RGBa(000, 112, 192, 0.15);	}


	.InfSubmenu{
		display: none;					}

	.menu-Informations .InfSubmenu{
		background-color: RGB(170, 250, 190);

	nav li .InfSubmenu{
		display: block;
		position: static;
	text-align: center;					}		
								}
	nav li:hover .InfSubmenu{
		display: block;
		position: static;
	text-align: center;					}


	.menu-Informations .InfSubmenu li:hover{
		background-color: RGB(000, 100, 0);		}






}